<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 50%;
            height: 100vh;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        div {
            border: black 1px solid;
        }

        .my-ul {
            list-style: none;
        }

        .my-ul li {
            display: inline;
        }

        .my-ol {
            display: inline-block
        }

        .my-uol{
            display: flex;
        }
    </style>
</head>

<body>
    <div>
        无序列表,type属性可改变前缀符号,不同浏览器前缀大小不一样，因此不常用。
        <ul>
            <li>C++</li>
            <li type="square">Python</li>
            <li type="circle">JavaScript</li>
        </ul>
        使用CSS去掉前缀，利用给li添加背景图片的方式显示前缀
        <ul class="my-ul">
            <li>C++</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ul>
    </div>
    <div>
        有序列表,type属性可以指定序号类型
        <br>
        <!-- 1:"默认阿拉伯数字"
             a:"小写字母排序",A:"大写字母排序"
             i:"小写罗马数字",I:"大写罗马数字" -->
        <ol type="1" class="my-ol">
            <li>C</li>
            <li>C++</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ol>
        <ol type="a" class="my-ol">
            <li>C</li>
            <li>C++</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ol>
        <ol type="A" class="my-ol">
            <li>C</li>
            <li>C++</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ol>
        <ol type="i" class="my-ol">
            <li>C</li>
            <li>C++</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ol>
        <ol type="I" class="my-ol">
            <li>C</li>
            <li>C++</li>
            <li>Python</li>
            <li>JavaScript</li>
        </ol>
    </div>
    <div>
        列表之间可以相互嵌套
        <ul class="my-uol">
            <li>八岐大蛇
                <ol>
                    <li>生</li>
                    <li>攻</li>
                    <li>爆</li>
                    <li>伤魂鸟</li>
                </ol>
            </li>
            <li>化鲸
                <ol>
                    <li>速</li>
                    <li>攻</li>
                    <li>攻</li>
                    <li>轮入道</li>
                </ol>
            </li>
            <li>书翁
                <ul>
                    <li>生</li>
                    <li>生</li>
                    <li>爆</li>
                    <li>招财</li>
                </ol>
            </li>
        </ul>
    </div>
</body>

</html>